<template>
  <view class="confirm-modal">
    <up-popup v-model:show="show" overlay mode="center" :round="10" closeable closeOnClickOverlay
      @close="handleCancel" @open="open">
      <view class="modal-content">
        <view class="modal-header">
          <view class="modal-title">{{ title }}</view>
        </view>
        <view class="modal-body">
          <view class="confirm-message">{{ message }}</view>
        </view>
        <view class="modal-footer">
          <up-button plain @click="handleCancel">取消</up-button>
          <up-button type="primary" @click="handleConfirm">确认</up-button>
        </view>
      </view>
    </up-popup>
  </view>
</template>

<script lang="ts" setup>
import { ref, defineProps, defineEmits, defineExpose } from 'vue';

defineOptions({ name: "ConfirmModal" });

// 定义属性
const props = defineProps({
  title: {
    type: String,
    default: '确认操作'
  },
  message: {
    type: String,
    default: '确定要执行此操作吗？'
  }
});

// 定义事件
const emit = defineEmits(['update:show', 'confirm', 'cancel']);

// 创建响应式数据  
const show = defineModel<boolean>("show", { default: false });

// 打开弹窗
function open() {
  show.value = true;
}

// 确认操作
function handleConfirm() {
  emit('confirm');
  show.value = false;
}

// 取消操作
function handleCancel() {
  emit('cancel');
  show.value = false;
}

// 暴露方法
defineExpose({
  open
});
</script>

<style lang="scss" scoped>
.confirm-modal {
  .modal-content {
    width: 80vw;
    background-color: #fff;
    border-radius: 8px;
    padding: 20px;
    
    .modal-header {
      margin-bottom: 15px;
      
      .modal-title {
        font-size: 16px;
        font-weight: bold;
        text-align: center;
        color: #333;
      }
    }
    
    .modal-body {
      padding: 10px 0;
      
      .confirm-message {
        text-align: center;
        color: #666;
        font-size: 14px;
        line-height: 1.5;
      }
    }
    
    .modal-footer {
      margin-top: 20px;
      display: flex;
      justify-content: space-around;
      
      .up-button {
        min-width: 100px;
      }
    }
  }
}
</style>